//设置教学班
<template>
  <div id="set-teaching-class" class="manual-entry-container">
    <div>
      <ul>
        <li>
          <span class="active">课程编号</span>
          <span v-if="kcbh != '' && kcbh != null">{{ kcbh }}</span
          ><span v-else>--</span>
          <span class="active">课程名称</span>
          <span v-if="kcmc != '' && kcmc != null">{{ kcmc }} </span
          ><span v-else>--</span>
          <span class="active">课程简介</span>
          <span v-if="kcjj != '' && kcjj != null">{{ kcjj }} </span
          ><span v-else>--</span>
        </li>
        <li>
          <span class="active">总学时</span>
          <span v-if="zxs != '' && zxs != null">{{ zxs }}</span
          ><span v-else>--</span>
          <span class="active">公共选修课</span>
          <span v-if="ggxxk != '' && ggxxk != null">{{ ggxxk }} </span
          ><span v-else>--</span>
          <span class="active">学 分</span>
          <span v-if="xf != '' && xf != null">{{ xf }}</span
          ><span v-else>--</span>
        </li>
      </ul>
    </div>
    <div class="xzjy">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="6">
              <div
                class="wrapper-container"
                style="display: flex; flex-direction: column"
              >
                <div class="assessment-container" style="margin: 0px">
                  <div
                    class="table-container"
                    style="border: 0px solid #004ca7"
                  >
                    <el-table
                      ref="tableDataRef"
                      :data="tableData"
                      border
                      class="table-data"
                      row-class-name="row-class"
                      cell-class-name="cell-class"
                      header-row-class-name="header-row-class"
                      header-cell-class-name="header-cell-class"
                      style="height: 580px; overflow-y: auto"
                      @selection-change="handleSelectLeftData"
                    >
                      <el-table-column
                        align="center"
                        type="selection"
                        width="80"
                      ></el-table-column>
                      <el-table-column
                        prop="zybc"
                        label="上课班次"
                        align="center"
                      >
                        <template slot-scope="{ row }">
                          {{ row.name }}(<span
                            v-if="row.yxrs == row.rs"
                            :class="row.yxrs == row.rs ? '' : 'not-same'"
                            >{{ row.rs }}</span
                          ><span
                            v-else
                            :class="row.yxrs == row.rs ? '' : 'not-same'"
                            >{{ row.yxrs }}</span
                          >人)
                          <!-- v-if="!(row.yxrs == row.rs)" -->
                          <i
                            class="el-icon-more-outline show-skbc"
                            @click="showDetailBtn(row)"
                          ></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="arrow-right-postion">
                <div class="btn">
                  <el-button type="primary" plain size="mini" @click="hbSubmit"
                    >合班</el-button
                  >
                </div>
                <div class="btn" style="margin-top: 60px">
                  <el-button type="danger" plain size="mini" @click="cbSubmit"
                    >拆班</el-button
                  >
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div
                class="wrapper-container"
                style="display: flex; flex-direction: column"
              >
                <div class="assessment-container" style="margin: 0px">
                  <div
                    class="table-container"
                    style="border: 0px solid #004ca7"
                  >
                    <el-table
                      :data="tableData1"
                      border
                      class="table-data"
                      row-class-name="row-class"
                      cell-class-name="cell-class"
                      header-row-class-name="header-row-class"
                      header-cell-class-name="header-cell-class"
                      style="height: 580px; overflow-y: auto"
                      @selection-change="handleSelectionChange"
                    >
                      <el-table-column
                        align="center"
                        type="selection"
                        width="80"
                      ></el-table-column>
                      <el-table-column
                        prop="name"
                        label="教学班"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        prop="zybcList"
                        label="上课专业班次"
                        align="center"
                      >
                        <template slot-scope="scoped">
                          <div
                            class="show-deleted"
                            @click="viewSkzybx(item, scoped.row['id'])"
                            v-for="(item, index) in scoped.row['zybcList']"
                            :key="index"
                          >
                            <span>{{ item.name }} ({{ item.yxrs }})人</span
                            ><i
                              class="el-icon-close"
                              @click.stop="deletedInfo(item, scoped.row['id'])"
                            ></i>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="totalHour"
                        label="学时"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        prop="credit"
                        label="学分"
                        align="center"
                      ></el-table-column>
                      <el-table-column
                        prop="teachTask"
                        label="教学课主讲"
                        align="center"
                      ></el-table-column>
                      <el-table-column align="center" label="操作" width="160">
                        <template slot-scope="scoped">
                          <div
                            style="
                              display: flex;
                              padding-left: 10px;
                              justify-content: space-around;
                            "
                          >
                            <el-button
                              type="success"
                              size="mini"
                              plain
                              icon="el-icon-edit"
                              @click="editClassInfo(scoped.row)"
                              >修改</el-button
                            >
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
              <div style="margin-top: 20px">
                <el-row>
                  <el-col :span="4" offset="4">
                    <el-button
                      type="warning"
                      plain
                      size="mini"
                      @click="addHBInfo"
                      >新增</el-button
                    >
                  </el-col>
                  <el-col :span="4" offset="4">
                    <el-button
                      type="danger"
                      plain
                      size="mini"
                      @click="deletedHcList"
                      >删 除</el-button
                    >
                  </el-col>
                  <el-col :span="4" offset="4">
                    <el-button
                      type="success"
                      plain
                      size="mini"
                      @click="researshOffice"
                      >取 消</el-button
                    >
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :title="rowTitle"
      :visible.sync="showDetailDialog"
      width="1000px"
      class="xzjy"
    >
      <div
        class="wrapper-container"
        style="display: flex; flex-direction: column"
      >
        <div class="assessment-container" style="margin: 0px">
          <div class="table-container" style="border: 0px solid #004ca7">
            <el-table
              ref="multipleTable"
              :data="tableData2"
              border
              class="table-data"
              row-class-name="row-class"
              cell-class-name="cell-class"
              header-row-class-name="header-row-class"
              header-cell-class-name="header-cell-class"
              style="height: 400px; overflow-y: auto"
              @selection-change="handlePersonSelection"
            >
              <el-table-column
                align="center"
                type="selection"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="studentCode"
                label="学号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="studentName"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="gender"
                label="性别"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="birthday"
                label="出生日期"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          size="mini"
          plain
          style="margin-right: 50px"
          @click="tipConfirm"
          >确 定</el-button
        >
        <el-button
          type="danger"
          size="mini"
          plain
          @click="tipClose()"
          >取 消</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="上课专业班次详情"
      :visible.sync="profDetailDialog"
      width="1000px"
      class="xzjy"
    >
      <div
        class="wrapper-container"
        style="display: flex; flex-direction: column"
      >
        <div class="search-container">
          <div class="search-container-left">
            <div class="search-container-item">
              <span>姓名：</span>
              <el-input
                style="width: 50%"
                size="small"
                v-model="detail_xm"
              ></el-input>
            </div>
            <div class="search-container-item">
              <span>学号：</span>
              <el-input
                style="width: 50%"
                size="small"
                v-model="detail_no"
              ></el-input>
            </div>
            <div class="search-button" @click="queryDetailsInfo">
              <img
                src="../../../../../assets/assessment/icon-search.png"
                alt=""
              />
              <span>查询</span>
            </div>
          </div>
        </div>
        <div class="assessment-container" style="margin: 0px">
          <div class="table-container" style="border: 0px solid #004ca7">
            <el-table
              :data="tableData3"
              border
              class="table-data"
              row-class-name="row-class"
              cell-class-name="cell-class"
              header-row-class-name="header-row-class"
              header-cell-class-name="header-cell-class"
              style="height: 430px; overflow-y: auto"
            >
              <el-table-column
                prop="studentCode"
                label="学号"
                align="center"
              ></el-table-column>
              <el-table-column prop="name" label="姓名" align="center">
                <template slot-scope="scoped">
                  <span>{{ scoped.row["name"] }}</span>
                  <!-- <img style="width:20px" src="../../../../../assets/assessment/icon-plan-record-detail.png"/> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="specialtyClassName"
                label="专业班次"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="gender"
                label="性别"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="birthday"
                label="出生日期"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="specialtyName"
                label="专业"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="studentStatus"
                label="学籍状态"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="deletedInfoDialog"
      width="600px"
      class="deletedDialog"
    >
      <div class="class-tip">您确认删除当前信息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          size="mini"
          plain
          style="margin-right: 50px"
          @click="deletedSubmit"
          >确 定</el-button
        >
        <el-button type="danger" size="mini" plain @click="deletedCancel"
          >取 消</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="deletedZYBCDialog"
      width="600px"
      class="deletedDialog"
    >
      <div class="class-tip">您确认删除当前专业班次信息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          size="mini"
          plain
          style="margin-right: 50px"
          @click="deletedZYBCSubmit"
          >确 定
        </el-button>
        <el-button
          type="danger"
          size="mini"
          plain
          @click="deletedZYBCDialog = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ButtonItem from "@/components/ButtonItem.vue";
import {
  jxbgl_teaching_save,
  jxbgl_query_szIndex,
  jxbgl_query_student_list,
  jxbgl_query_xyByJxbId,
  jxbgl_query_remove,
  jxbgl_calss_bh,
  jxbgl_calss_cb,
  jxbgl_calss_deleteZybcFromJxb,
} from "@/api/trainingManagement/place.js";

let num = 0
export default {
  components: {
    ButtonItem,
  },
  name: "workOutClass",
  data() {
    return {
      deletedZYBCDialog: false, //删除教学班中的专业班次
      deletedInfoDialog: false, //删除弹窗
      detail_xm: "",
      detail_no: "",
      syncShowTip: false,
      profDetailDialog: false,
      showDetailDialog: false,
      showPeopleDialogly: false,
      kcbh: "",
      kcmc: "",
      kcjj: "",
      zxs: "",//学时
      ggxxk: "",
      xf: "",
      subjectType:'',//修习类型
      teachingHours:'',//理论学时
      practiceHours:'',//实践学时
      eduLevel:'',//培养层次
      eduLevelName:'',
      staffRoom:'',
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [], //合班后数据
      tableData3_Old: [], //
      kcid: "", //课程id
      xueqi: "", //学期
      nj: this.$route.query.xueqiName.substr(0,4), //年级
      kcbh: "", //课程编号
      selectHcList: [], //多选 已合班数据列表
      rowTitle: "", //当前选中标题
      personSelect: [], //选中人员
      selectId: "", //行信息
      selectList: [], //选中人员信息列表
      leftSKBC: [], //左侧上课班次选中列表
      selctZYBCInfo: {}, //教学班中的专业班次信息
      selectJXBID: "", //教学班id
      courseNo: "", //课程no
      isOnly:false
    };
  },
  mounted() {
    this.kcid = this.$route.query.kcid;
    this.xueqi = this.$route.query.xueqi;
    this.nj = this.$route.query.nj || this.nj;
    this.kcbh = this.$route.query.kcbh;
    this.queryKcById();
  },
  methods: {
    // 删除教学班中的专业班次
    async deletedZYBCSubmit() {
      var zybcId = this.selectJXBID;
      var jxbId = this.selctZYBCInfo.id;
      const res = await jxbgl_calss_deleteZybcFromJxb(jxbId, zybcId);
      if (res.data.code == 200) {
        this.$message.success("删除成功!");
        this.queryKcById();
        this.deletedZYBCDialog = false;
      }
    },
    handleSelectLeftData(val) {
      console.log('父级选中', val)
      this.leftSKBC = val;
    },
    handlePersonSelection(val) {
      num++
      this.personSelect = val;
    },
    // 合班
    async hbSubmit() {
      var _this = this;
      if (_this.leftSKBC.length > 0) {
        var paramsList = [];
        _this.leftSKBC.forEach((item) => {
          _this.selectList.forEach((data) => {
            if (item.id == data.id) {
              data.select.forEach((elem) => {
                paramsList.push(elem.id);
              });
            }
          });
        });
        if (paramsList.length == 0) {
          this.$message.warning("请先选择上课人员!");
          return;
        }
        if (_this.selectHcList.length > 1) {
          _this.$message.warning("最多只能选择一个教学班!");
          return;
        } else if(_this.selectHcList.length > 0){
          let _this = this;
            let data = {
              list: paramsList,
              jxbId: _this.selectHcList[0].id,
            };
            const res = await jxbgl_calss_bh(data);
            if (res.data.code == 200) {
              _this.$message.success("合班成功!");
              _this.queryKcById()
            }
        } else if(_this.selectHcList.length == 0){
          var params = {
            info: {
              teachingClassName: _this.leftSKBC[0].name, //教学班名
              courseName: this.kcmc,
              courseCharger: '', // 课程负责人
              pointsSystem: '百分制', //分制
              homeworkRatio: '', // 课下作业成绩所占比例
              hskeRatio: '', // 课堂测试成绩所占比例
              midExamRatio: '', //期中考试成绩所占比例
              finalExamRetio: '', //课终考核成绩所占比例
              teachingMethod: '', //授课方式
              arrangeReq: '', //排课要求
              place: '',
              placeType: '', // 教学场所类型
              teachingHours: this.teachingHours,
              practiceHours: this.practiceHours,
              totalHours: this.zxs,
              eduLevel: this.eduLevel,
              credit: this.xf,
              staffRoom:'',
              term:this.xueqi,
              nj:this.nj
            },
            extend: {
              khfs: '考试',
              teachtask: "",//助教
              assistantemployeeids: "",//主讲
              xxlx: this.subjectType,
              courseno:this.kcbh
            },
          };
          const res = await jxbgl_teaching_save(params);
          if (res.data.code == 200) {
            _this.isOnly = true;
            _this.queryKcById(paramsList);
          } else {
            this.$message.success("合班失败！");
          }
        }
      } else {
        _this.$message.warning("请先选中专业班次列表!");
        return;
      }
    },
    //合班选择教学班时进行判断
    async hbInfoM(list,id){
    },
    // 拆班
    async cbSubmit() {
      var _this = this;
      if (_this.selectHcList.length > 0) {
        var para = [];
        _this.selectHcList.forEach((item) => {
          para.push(item.id);
        });
        const res = await jxbgl_calss_cb(para);
        if (res.data.code == 200) {
          _this.$message.success("拆班成功!");
          _this.queryKcById();
        }
      } else {
        _this.$message.warning("请先选择你要拆分的班级!");
      }
    },
    deletedCancel() {
      this.deletedInfoDialog = false;
    },
    // 批量删除
    async deletedSubmit() {
      var idStr = [];
      this.selectHcList.forEach((item) => {
        idStr.push(item.id);
      });
      const res = await jxbgl_query_remove(idStr);
      if (res.data.code == 200) {
        this.$message.success("删除成功!");
        this.deletedInfoDialog = false;
        this.queryKcById();
      }
    },
    // 新增合班课程
    addHBInfo() {
      this.$router.push({
        path: "/admin/teachingTaskManage/teachingclass/insertTeachClassInfo",
        query: {
          id: this.kcid,
          type: "add",
          kcid: this.kcid,
          xueqi: this.xueqi,
          nj: this.nj,
          kcbh: this.kcbh,
        },
      });
    },
    deletedHcList() {
      if (this.selectHcList.length > 0) {
        this.deletedInfoDialog = true;
      } else {
        this.$message.warning("请至少选择一条要删除的数据");
      }
    },
    handleSelectionChange(val) {
      this.selectHcList = val;
    },
    queryDetailsInfo() {
      var table = [];
      var key1 = this.detail_xm || "";
      var key2 = this.detail_no || "";
      console.log(this.tableData3_Old, "this.tableData3_Old ==== ");
      for (var i = 0; i < this.tableData3_Old.length; i++) {
        if (
          this.tableData3_Old[i].name.indexOf(key1) >= 0 &&
          this.tableData3_Old[i].studentCode.indexOf(key2) >= 0
        ) {
          table.push(this.tableData3_Old[i]);
        }
      }
      this.tableData3 = table;
    },
    deletedInfo(row, jxbid) {
      this.selctZYBCInfo = row;
      this.selectJXBID = jxbid;
      this.deletedZYBCDialog = true;
      console.log(this.selctZYBCInfo, "selctZYBCInfo ======== s");
    },
    viewSkzybx(row, jxbid) {
      this.profDetailDialog = true;
      this.selectJXBID = jxbid;
      this.queryHbhList(row.id);
    },
    async queryHbhList(id) {
      var _this = this;
      const res = await jxbgl_query_xyByJxbId(this.selectJXBID, id);
      if (res.data.code == 200) {
        var data = res.data.data;
        console.log(data, "====");
        _this.tableData3 = [];
        data.forEach((item) => {
          item.birthday = item.birthday.substring(0, 10);
          _this.tableData3.push(item);
        });
        _this.tableData3_Old = _this.tableData3;
      }
    },
    // 查询上课班次人员列表
    async querySkbcStudent(id) {
      // var _this = this;
      var courseNo = this.courseNo;
      var nj = this.nj;
      var zybcId = id;
      var xueqi = this.xueqi;
      const res = await jxbgl_query_student_list(courseNo, nj, zybcId, xueqi);
      if (res.data.code == 200) {
        var data = res.data.data;
        this.tableData2 = [];
        data.forEach((item) => {
          item.birthday = item.birthday.substring(0, 10);
          this.tableData2.push(item);
        });
        this.personSelect = []
        setTimeout(() => {
          var select = this.selectList.filter((item) => item.id == id);
          if (select.length > 0) {
            this.personSelect = select[0].select;

            select[0].select.forEach((it) => {
                this.tableData2.find(item => {
                  if (it.id == item.id) {
                    this.$refs.multipleTable.toggleRowSelection(item, true)
                  }
                })
            })
          }
        }, 100);
      }
    },
    // 查询教学班管理数据
    async queryKcById(list) {
      var kcid = this.kcid;
      var nj = this.nj;
      var xueqi = this.xueqi;
      var kcbh = this.kcbh;
      const res = await jxbgl_query_szIndex(kcid, nj, xueqi, kcbh);
      if (res.data.code == 200) {
        var courseData = res.data.data.courseInfo;
        this.kcmc = courseData.courseName;
        this.kcbh = courseData.courseCode;
        this.kcjj = courseData.courseIntro;
        this.zxs = courseData.totalHours;
        this.xf = courseData.credit;
        this.eduLevel = courseData.eduLevel;
        this.eduLevelName = courseData.eduLevelName;
        this.subjectType = courseData.subjectType;//修习类型
        this.teachingHours = courseData.teachingHours;
        this.practiceHours = courseData.practiceHours;
        this.staffRoom = courseData.teachingClassName;
        this.khfs = courseData.khfs;
        var selectL = [];
        if (res.data.data.zybc.length > 0) {
          res.data.data.zybc.forEach((item) => {
            selectL.push({ id: item.id, select: [] });
          });
        }
        this.selectList = selectL;
        this.tableData = [];
        res.data.data.zybc.forEach(item=>{
          if(item.rs != item.yxrs && item.rs != 0){
            this.tableData.push(item)
          }
        })
        this.tableData1 = res.data.data.jxb;
        if(this.isOnly){
          let data = {
            list: list,
            jxbId: this.tableData1[0].id,
          };
          const res = await jxbgl_calss_bh(data);
          if (res.data.code == 200) {
            this.$message.success("合班成功!");
            this.queryKcById();
            this.isOnly = false;
          } else {
            return
          }
        }
      }
    },
    showDetailBtn(row) {
      this.selectId = row.id;
      this.rowTitle = row.name + "(" + row.yxrs + ")";
      this.showDetailDialog = true;
      this.querySkbcStudent(row.id);
    },
    // 选中班次人员
    tipConfirm() {
      var id = this.selectId;
      var person = this.personSelect;
      this.selectList.forEach((item) => {
        if (item.id == id) {
          item.select = person;
        }
      });
      this.tableData.forEach((item) => {
        if (item.id == id) {
          item.yxrs = person.length;
        }
      });
      this.tipClose()
    },
    tipClose() {
      this.showDetailDialog = false;
      this.personSelect = [];
      var id = this.selectId;
      for (let i =0; i <this.selectList.length; i++) {
        let item = this.selectList[i]
        if (item.id == id) {
          for (let j=0; j<this.tableData.length; j++) {
            let list = this.tableData[j]
            if (list.id == id) {
              if (item.select.length) {
                this.$refs.tableDataRef.toggleRowSelection(list, true)
              } else {
                this.$refs.tableDataRef.toggleRowSelection(list, false)
              }
              break
            }
          }
        }
      }
    },
    editClassInfo(row) {
      this.$router.push({
        path: "/admin/teachingTaskManage/teachingclass/editTeachClassInfo",
        query: {
          id: row.id,
          type: "edit",
          kcid: this.kcid,
          xueqi: this.xueqi,
          nj: this.nj,
          kcbh: this.kcbh,
        },
      });
    },
    researshOffice() {
      this.$router.replace("/admin/teachingTaskManage/teachingclass/index");
    },
  },
};
</script>

<style scoped lang="less">
.xzjy {
  width: calc(100% - 20px);
  margin: 0px auto 0;
  padding: 0 !important;

  .wrapper-container {
    width: 100% !important;

    .search-container {
      margin-bottom: 20px;
    }
  }

  .wrapper-container .search-container .search-container-left {
    color: #004ca7;
    margin-left: 20px;
    flex-wrap: wrap;
    display: flex;

    .search-container-item {
      width: 200px;
      margin-right: 10px;

      .box {
        > span {
          text-align: left;
          width: 80px;
        }

        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;

        .el-input--medium .el-input__inner {
          height: 28px;
        }
      }
    }

    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }

      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
}

.arrow-right-postion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 600px;
}

.assessment-container {
  width: calc(100%);
  margin: 20px;
  margin-top: 0;

  /deep/ .table-container {
    width: 100% !important;

    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .wrapper-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      > div {
        margin-bottom: 8px;
      }
    }

    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }
}

.manual-entry-container {
  > div:nth-child(1) {
    width: calc(100% - 20px);
    height: 124px;
    border-left: 1px solid rgba(0, 76, 167, 0.8);
    border-right: 1px solid rgba(0, 76, 167, 0.8);
    border-top: 1px solid rgba(0, 76, 167, 0.8);
    border-bottom: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 20px auto 0;
    margin-bottom: 20px;

    ul {
      list-style: none;

      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;

        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;

          &:nth-child(n) {
            width: 15%;
          }

          // &:nth-child(2n) {
          // 	width: 444px;
          // }
          &:last-child {
            border-right: none;
          }

          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
      }

      > li:nth-last-child(1) {
        border-bottom: 0;
      }

      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }

      &:nth-child(2n) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);

          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 60px;

            &:nth-child(1) {
              width: 347px;
            }

            &:nth-child(2) {
              width: 347px;
            }

            &:nth-child(3) {
              width: 347px;
            }

            &:nth-child(4) {
              width: 347px;
            }

            &:nth-child(5) {
              width: 347px;
            }

            &.active {
              //border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }

          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;

              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }

                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }

      .table_list {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);

          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 120px;

            &:nth-child(1) {
              width: 347px;
            }

            &:nth-child(2) {
              width: 347px;
            }

            &:nth-child(3) {
              width: 347px;
            }

            &:nth-child(4) {
              width: 347px;
            }

            &:nth-child(5) {
              width: 347px;
            }

            &.active {
              //border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }

          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;

              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }

                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }

    > div {
      padding: 14px 83px;
      height: 78px;

      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }

      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;

          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }

  /deep/ .el-input--small .el-input__inner {
    height: 28px;
  }
}

.show-skbc {
  border: 1px solid;
  border-radius: 3px;
  margin-left: 5px;
  cursor: pointer;
}

// .no-show {
//   display: none;
// }
.show-deleted {
  > i {
    display: none;
  }
}

.show-deleted:hover {
  cursor: pointer;
  text-decoration: underline;

  > i {
    display: block;
  }
}

.deletedDialog {
  /deep/ .el-dialog {
    height: 320px;
  }
}

.class-tip {
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px;
}

.not-same {
  color: red;
  font-weight: bold;
}
</style>


<style lang="less" scoped>
#set-teaching-class {
  /deep/ .el-button--warning.is-plain {
    background: #fff6ef;
    border-color: #f3b815;
    color: #f3b815;
    border-radius: 6px;
  }

  /deep/ .el-button--warning.is-plain:focus,
  .el-button--warning.is-plain:hover {
    color: #f3b815;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 6px;
  }

  /deep/ .el-button--success.is-plain {
    background: #f1fff8;
    border-color: #02c86c;
    color: #02c86c;
    border-radius: 6px;
  }

  /deep/ .el-button--success.is-plain:focus,
  .el-button--success.is-plain:hover {
    background: #f1fff8;
    border: 1px solid #02c86c;
    color: #02c86c;
    border-radius: 6px;
  }

  /deep/ .el-button--primary.is-plain {
    background: #f1f8fe;
    border-color: #51aef6;
    color: #51aef6;
    border-radius: 6px;
  }

  /deep/ .el-button--primary.is-plain:focus,
  .el-button--primary.is-plain:hover {
    background: #f1f8fe;
    border: 1px solid #51aef6;
    color: #51aef6;
    border-radius: 6px;
  }

  /deep/ .el-button--danger.is-plain {
    background: #ffefef;
    border-color: #ff3819;
    color: #ff3819;
    border-radius: 6px;
  }

  /deep/ .el-button--danger.is-plain:focus,
  .el-button--danger.is-plain:hover {
    background: #ffefef;
    border: 1px solid #ff3819;
    color: #ff3819;
    border-radius: 6px;
  }
}
</style>
